<template>
  <div class="app-container ">

    <!-- 操作区-->
    <el-row class="search-collapse">
      <el-col :span="24">
        <el-button type="primary" plain class="el-icon-plus" @click="addForm">新增</el-button>
      </el-col>
    </el-row>

    <!-- 数据显示区 -->
    <el-row class="select-table table-striped">
      <el-col :span="24">

       <el-table :data="responseVO.data"  border style="width: 100%" >
         <el-table-column   prop="roleName"  label="角色名称"></el-table-column>
         <el-table-column   prop="roleKey"  label="权限标识"></el-table-column>

         <el-table-column  label="状态">
           <template slot-scope="scope">
             <el-tag v-if="scope.row.status===0" effect="dark">启用</el-tag>
             <el-tag v-else type="danger" effect="dark">禁用</el-tag>
           </template>
         </el-table-column>

         <el-table-column   prop="createTime"  label="创建时间"></el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button type="text" @click="editForm(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
       </el-table>

       <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="searchForm.pageNumber"
             :page-sizes="[5,10,20,30, 50]"
             :page-size="searchForm.pageSize"
             layout="total, sizes, prev, pager, next, jumper"
             :total="responseVO.total">
           </el-pagination>

      </el-col>
    </el-row>

    <!-- 编辑框-->
    <el-dialog :title="title" :visible="dialogFormVisible" :show-close="false" width="500px" >

      <el-form :model="form"  ref="form">
        <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
          <el-input v-model="form.roleName" ></el-input>
        </el-form-item>

        <el-form-item label="权限标识" :label-width="formLabelWidth" prop="roleKey">
          <el-input v-model="form.roleKey" ></el-input>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
          <el-radio-group v-model="form.status">
              <el-radio :label="0">正常</el-radio>
              <el-radio :label="1">停用</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="菜单权限" :label-width="formLabelWidth">
           <el-tree
             ref="menuTree"
             :props="props"
             :data="menuTreeData"
             node-key="menuId"
             show-checkbox
             :check-strictly="checkStrictly"
             @check-change="handleTreeChange">
           </el-tree>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveForm" >确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
// 引用 数据访问层
import roleService from '@/service/roleService'
// vue规范，绝对不能乱写的
export default {
  // 1、初始化数据语法
  data() {
    return {
      // 查询条件js对象
      searchForm: {
        pageNumber: 1,
        pageSize: 5
      },
      // 分页数据对象
      responseVO: {
        data: [],
        total: 0
      },
      //对话框
      dialogFormVisible: false,
      title: '新增',
      formLabelWidth: '100px',
      // 向后台提交的数据
      form: {
        roleId: undefined,
        roleName: undefined,
        roleKey: undefined,
        status: 0,
        menusId: []
      },
      // 菜单树型数据
      menuTreeData: [],
      props: {
        label: 'menuName',
        children: 'children'
      },
      // 父子不相关联操作 false 相关联，true不关联
      // 修改的时候设为true,  新增的时候设业false
      checkStrictly: false

    }
  },
  // 2、vue管理的方法
  methods: {
    // 每页几笔发化变化
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      // 重新加载数据
      roleService.loadData()
    },
    // 当前是第几页
    handleCurrentChange(val) {
      this.searchForm.pageNumber =val
      // 重新加载数据
      roleService.loadData()
    },
    // 表格多选事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //选择了菜单数据变化事件
    handleTreeChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    // 编辑按钮事件
    editForm (data) {
      roleService.editForm(data)
    },
    // 对话框保存按钮
    saveForm() {
      roleService.saveForm()
    },
    addForm() {
      roleService.addForm()
    }
  },
  // 3、vue初始化以后自动执行方法
  created() {
    // 没有这步直接报错
    roleService.init(this)
    roleService.loadData()
  }

}

</script>
